<template>
  <div class="store-manage">
    <el-button style="margin-bottom: 10px;" type="primary" @click="handleAdd()">
      领用
    </el-button>
    <el-table :data="tableData" border empty-text="暂无数据">
      <el-table-column prop="createTime" label="领用时间" width="200"/>
      <el-table-column prop="userName" label="领用人"/>
      <el-table-column prop="facilityNo" label="编号"/>
      <el-table-column prop="facilityName" label="设备名称"/>
      <el-table-column prop="categoryName" label="类别"/>
      <el-table-column fixed="right" align="center" label="操作" width="120">
        <template #default="{ row }">
          <el-button link type="danger" @click="handleDel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="dialogVisible" :title="title" width="800">
    <el-form :rules="rules" ref="formDataRef" :model="formData" label-width="120px">
      <el-form-item label="领用人" prop="userId">
        <el-select v-model="formData.userId" placeholder="请选择领用人">
          <el-option v-for="item in userData" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="设备编号" prop="sex">
        <el-input v-model="formData.facilityNo" @change="changeRow" placeholder="请输入设备编号" clearable/>
      </el-form-item>
    </el-form>
    <div style="padding-left:  20px;">
      <el-table :data="formTableData" border empty-text="暂无数据">
        <el-table-column prop="facilityNo" label="编号"/>
        <el-table-column prop="facilityName" label="设备名称"/>
        <el-table-column prop="categoryName" label="类别"/>
        <el-table-column fixed="right" align="center" label="操作" width="120">
          <template #default="{ $index }">
            <el-button link type="danger" @click="handleFormDel($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savaData">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="js" setup>
import {ref, onMounted} from 'vue'
import {ElMessageBox, ElMessage} from 'element-plus'
import axios from 'axios'

let formData = ref({})
let formDataRef = ref(null)
let formTableData = ref([])
let title = ref('新增')
let tableData = ref([])
let userData = ref([])
let dialogVisible = ref(false)
// 效验
const rules = {
  userId: [{required: true, message: '领用人不能为空', trigger: 'blur'}],
}

// 新增
const handleAdd = () => {
  title.value = '领用'
  formData.value = {}
  dialogVisible.value = true
  getUser()
}


// 删除
const handleDel = (row) => {
  console.log(row)
  ElMessageBox.confirm(
      '是否确定删除，警告?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    ElMessage
    axios({
      method: "get", // POST GET
      url: "http://localhost:48080/receive/return/delete",
      params: {id: row.id}
    }).then(res => {
      ElMessage({
        type: 'success',
        message: `操作成功`,
      })
      init()
      console.log(res);
    });
  })
}
// 归还提交
const savaData = () => {
  formDataRef.value.validate(valid => {
    if (!valid) return
    let ids = []
    formTableData.value.forEach((item) => {
      ids.push(item.id)
    })
    let params = {
      ids: ids,
      type: 1,
      userId: formData.value.userId
    }
    axios({
      method: "POST", // POST GET
      url: "http://localhost:48080/facility/facility/update/status",
      data: params, // 传参
    }).then(() => {
      ElMessage({
        type: 'success',
        message: `操作成功`,
      })
      dialogVisible.value = false
      init()
    });
  })
}


// 表单-添加数据
const changeRow = (data) => {
  let params = {
    name: data,
    type: 1
  }
  axios({
    method: "POST", // POST GET
    url: "http://localhost:48080/facility/facility/get-by-no",
    data: params, // 传参
  }).then(res => {
    const facility = res.data.data
    if (facility != null) {
      let data = {
        id: facility.id,
        facilityNo: facility.no,
        facilityName: facility.name,
        categoryName: facility.categoryName
      }
      formTableData.value.push(data)
    }
  });
}

// 表单-删除
const handleFormDel = (index) => {
  formTableData.value.splice(index, 1)
}

const init = () => {
  axios({
    method: "POST", // POST GET
    url: "http://localhost:48080/receive/return/list",
    data: {type: 1}, // 传参
  }).then(res => {
    let {data} = res || {}
    tableData.value = data.data
  });
}

const getUser = () => {
  axios({
    method: "get", // POST GET
    url: "http://localhost:48080/user/user/list",
  }).then(res => {
    console.log("用户数据", res.data.data)
    // let {data} = res || {}
    userData = res.data.data
  });
}

onMounted(() => {
  //  需要调用加 init()
  init()
})
</script>

<style scoped>
.store-manage {
  /* background: red; */
  padding: 10px;
}
</style>